import React, { Component } from 'react'

export default class Header extends Component {
  state = {
    content: '',
  }
  changeInput = (e) => {
    this.setState({
      content: e.target.value,
    })
  }
  // 回车
  Keyup = (e) => {
    if (e.keyCode === 13) {
      this.props.addList(this.state.content)
      this.setState({
        content: '',
      })
    }
  }
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          value={this.state.content}
          onChange={this.changeInput}
          onKeyUp={this.Keyup}
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
        />
      </header>
    )
  }
}
